<template>
  <div class="my-kit-doc">
    <aside>
      <div
        v-for="(link, index) in data.links"
        :key="index"
        class="routeClass"
        :class="route.name === link.key ? 'selectRouteClass' : ''"
      >
        <router-link :to="link.path ? link.path : ''">{{
          link.name
        }}</router-link>
      </div>
    </aside>
    <main>
      <router-view></router-view>
    </main>
  </div>
</template>

<script setup lang="ts">
import ComponentList from '/packages/list.json'

const route = useRoute()

const data = reactive({
  links: ComponentList.map(
    (item: { compName: String; compZhName: String }) => ({
      path: `/components/${item.compName}`,
      name: item.compZhName,
      key: item.compName
    })
  )
})
</script>

<style scoped lang="scss">
html,
body {
  margin: 0;
  padding: 0;
}
.my-kit-doc {
  display: flex;
  min-height: 100vh;
  aside {
    width: 200px;
    padding: 15px;
    border-right: 1px solid #ccc;

    .routeClass {
      padding: 10px 16px;
      line-height: 1.5;
      background-color: #ffffff;

      a {
        color: #606266;
      }
    }
    .selectRouteClass {
      background-color: #ecf5ff;

      a {
        color: #409eff;
      }
    }
  }
  main {
    width: 100%;
    flex: 1;
    padding: 15px;
  }
}
</style>
